<template>
  <div class="dept-form">
    <el-form ref="deptObj" :inline="true" :model="deptObj" :rules="deptRules" :label-width="showMobilePage ? '80px' : '100px'">
      <el-form-item :class="{ 'mobile-form-item': showMobilePage }" label="部门" prop="departmentAry" class="dept-name">
        <!-- <el-select v-model="deptObj.department" name="department" popper-class="global-select-down" @change="getDept">
          <el-option
            v-for="item in deptList"
            :key="item.id"
            :label="item.value"
            :value="item.id" />
        </el-select> -->
        <el-cascader
          v-model="deptObj.departmentAry"
          :show-all-levels="true"
          :disabled="!isEditAdmin"
          :options="deptList"
          :props="{
            multiple: false,
            checkStrictly: true,
            emitPath:true
          }"
          filterable
          collapse-tags
          class="department-select"
          size="small"
          placeholder="请选择部门"
          clearable
          @change="cascaderChanage"
        >
          <template slot-scope="{ data }">
            <ToolTip v-if="data.label && data.label.length > 14" :content="data.label">
              <span class="inline-tag ellipsisOne">{{ data.label }}</span>
            </ToolTip>
            <span v-else>{{ data.label }}</span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item :class="{ 'mobile-sync-item': showMobilePage }" prop="isSync" class="dept-name">
        <div class="center">
          <el-checkbox v-model="deptObj.cancleParticipate" :disabled="!isEditAdmin" @change="getParticipate">取消参与同步</el-checkbox>
          <slot name="del"/>
        </div>
      </el-form-item>
      <!--      <el-form-item>-->
      <!--        <slot />-->
      <!--      </el-form-item>-->
    </el-form>
  </div>
</template>
<script>
import subDeptInfo from '@/mixins/getSubDept';
import { mapState } from 'vuex';
export default {
  mixins: [subDeptInfo],
  props: {
    index: {
      type: Number,
      default: 0
    },
    deptList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    deptRules: {
      type: Object,
      default: () => {
        return {};
      }
    },
    deptObj: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isEditAdmin: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isChange: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    getDept(id) {
      this.isChange = true;
      this.$emit('isChange', id, this.index);
    },
    cascaderChanage(id) {
      this.$emit('isChange', id, this.index);
    },
    getParticipate(val) {
      const obj = {
        val,
        index: this.index
      };
      this.$emit('getParticipate', obj);
    }
  }
};
</script>
<style lang="scss" scoped>
.mobile-form-item {
  display: flex;
  margin-bottom: 0 !important;
}
.mobile-sync-item {
  margin: 0 0 24px 80px;
}
.dept-form {
  ::v-deep .el-icon-circle-close {
    line-height: 0;
  }
  .center{
    display: flex;
    align-items: center;
  }
}
</style>
